<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
    <link rel="stylesheet" href="app.css">
</head>

<body ng-controller="ViewCtrl">

<div ng-cloak layout-gt-sm="row" layout="column">

    <div flex-gt-sm="50" flex>

        <md-toolbar layout="row" class="md-hue-3">
            <div class="md-toolbar-tools">
                <span>Normal</span>
            </div>
        </md-toolbar>

        <md-content>
            <md-list flex>
                <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
                    <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}"/>
                    <div class="md-list-item-text" layout="column">
                        <h3>{{ item.who }}</h3>
                        <h4>{{ item.what }}</h4>
                        <p>{{ item.notes }}</p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">2 line item</md-subheader>
                <md-list-item class="md-2-line" ng-click="null">
                    <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[0].who }}</h3>
                        <p>Secondary text</p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
                <md-list-item class="md-3-line md-long-text" ng-click="null">
                    <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[0].who }}</h3>
                        <p>
                            Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
                            Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                            condimentum
                            velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                            himenaeos.
                        </p>
                    </div>
                </md-list-item>
                <md-list-item class="md-3-line md-long-text">
                    <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[1].who }}</h3>
                        <p>
                            Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
                            Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                            condimentum
                            velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos
                            himenaeos.
                        </p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">Classes</md-subheader>
                <md-list-item class="md-2-line" ng-repeat="phone in phones">
                    <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon"
                             ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
                    <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                         ng-if="phone.options.face"/>
                    <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
                        <h3> {{ phone.number }} </h3>
                        <p> {{ phone.type }} </p>
                    </div>
                    <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)"
                               ng-if="phone.options.actionIcon" aria-label="call">
                        <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
                    </md-button>
                </md-list-item>
            </md-list>
        </md-content>
    </div>

    <md-divider></md-divider>

    <div flex-gt-sm="50" flex>

        <md-toolbar layout="row" class="md-hue-3">
            <div class="md-toolbar-tools">
                <span>Dense</span>
            </div>
        </md-toolbar>

        <md-content>

            <md-list class="md-dense" flex>
                <md-subheader class="md-no-sticky">3 line item (dense)</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in todos">
                    <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}"/>
                    <div class="md-list-item-text" layout="column">
                        <h3>{{ item.who }}</h3>
                        <h4>{{ item.what }}</h4>
                        <p>{{ item.notes }}</p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">2 line item</md-subheader>
                <md-list-item class="md-2-line">
                    <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[0].who }}</h3>
                        <p>Secondary text</p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
                <md-list-item class="md-3-line md-long-text">
                    <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[0].who }}</h3>
                        <p>
                            Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
                            Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                            condimentum
                            velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                            himenaeos.
                        </p>
                    </div>
                </md-list-item>
                <md-list-item class="md-3-line md-long-text">
                    <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}"/>
                    <div class="md-list-item-text">
                        <h3>{{ todos[1].who }}</h3>
                        <p>
                            Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
                            Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                            condimentum
                            velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos
                            himenaeos.
                        </p>
                    </div>
                </md-list-item>
                <md-divider></md-divider>
                <md-subheader class="md-no-sticky">Classes</md-subheader>
                <md-list-item class="md-2-line" ng-repeat="phone in phones">
                    <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon"
                             ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
                    <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                         ng-if="phone.options.face"/>
                    <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
                        <h3> {{ phone.number }} </h3>
                        <p> {{ phone.type }} </p>
                    </div>
                    <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)"
                               ng-if="phone.options.actionIcon" aria-label="call">
                        <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
                    </md-button>
                </md-list-item>
            </md-list>
        </md-content>
    </div>

</div>

<div ng-cloak>
    <md-content class="buttondemoBasicUsage">

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button>{{title1}}</md-button>
            <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
            <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
            <md-button class="md-warn">{{title4}}</md-button>
            <div class="label">Flat</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button class="md-raised">Button</md-button>
            <md-button class="md-raised md-primary">Primary</md-button>
            <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
            <md-button class="md-raised md-warn">Warn</md-button>
            <div class="label">Raised</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button class="md-fab" aria-label="Eat cake">
                <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
            </md-button>

            <md-button class="md-fab md-primary" aria-label="Use Android">
                <md-icon md-svg-src="img/icons/android.svg"></md-icon>
            </md-button>

            <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
                <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
            </md-button>

            <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
                <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
            </md-button>

            <md-button class="md-fab md-mini" aria-label="Eat cake">
                <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
            </md-button>

            <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
                <md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>
            </md-button>
            <div class="label">FAB</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
            <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>

            <md-button>Default Button</md-button>
            <div class="label">Link vs. Button</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
            <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
            <md-button class="md-accent">Accent</md-button>
            <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
            <div class="label">Themed</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button class="md-icon-button md-primary" aria-label="Settings">
                <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button md-accent" aria-label="Favorite">
                <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button" aria-label="More">
                <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
            </md-button>
            <md-button href="http://google.com"
                       title="Launch Google.com in new window"
                       target="_blank"
                       ng-disabled="true"
                       aria-label="Google.com"
                       class="md-icon-button launch">
                <md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
            </md-button>
            <div class="label">Icon Button</div>
        </section>
    </md-content>

    <md-content>
        <h1 class="md-display-3">Headline</h1>
        <h2 class="md-display-1">Headline</h2>
        <h3 class="md-headline">Headline</h3>
    </md-content>
</div>

<div flex>
    <section layout="column" layout-align="center center" layout-no-wrap>
        <md-button class="md-fab md-raised md-primary ">
            <md-icon md-svg-src="img/icons/github.svg"></md-icon>
        </md-button>
        <md-button class="md-primary md-raised">
            My Test
        </md-button>

        <md-button class="md-raised md-warn ">
            My Test
        </md-button>

        <md-button class="md-raised md-warn">Warn</md-button>

        <md-button class="md-raised">
            Button
        </md-button>
    </section>
</div>

<div flex="">
    <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
                  md-row-height-gt-md="1:1" md-row-height="2:2"
                  md-gutter="12px" md-gutter-gt-sm="8px">

        <md-grid-tile md-rowspan="2" md-colspan="2" md-colspan-md="4" md-colspan-sm="2" md-colspan-xs="1">
            <md-grid-tile-header>
                Headter
            </md-grid-tile-header>

            <md-content flex="">
                <md-list class="md-dense" flex>
                    <md-subheader class="md-no-sticky">3 line item (dense)</md-subheader>
                    <md-list-item class="md-3-line" ng-repeat="item in todos">
                        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}"/>
                        <div class="md-list-item-text" layout="column">
                            <h3>{{ item.who }}</h3>
                            <h4>{{ item.what }}</h4>
                            <p>{{ item.notes }}</p>
                        </div>
                    </md-list-item>
                </md-list>

            </md-content>

            <md-grid-tile-footer>
                Footer
            </md-grid-tile-footer>

        </md-grid-tile>

        <md-grid-tile md-rowspan="2" md-colspan="2" md-colspan-md="4" md-colspan-sm="2" md-colspan-xs="1">
            <md-grid-tile-header>
                Headter
            </md-grid-tile-header>

            <div layout="column" layout-align="left center" id="grid-md-icons">
                <md-icon md-svg-src="img/icons/github.svg" ng-class="'md-36'"></md-icon>
                <md-icon md-svg-src="img/icons/github.svg" ng-class="'md-48'"></md-icon>
            </div>

            <md-grid-tile-footer>
                Footer
            </md-grid-tile-footer>

        </md-grid-tile>

    </md-grid-list>
</div>

<div class="icondemoFontIconsWithLigatures ">
    <div class="glyph" ng-repeat="font in fonts" layout="row">
        <div ng-repeat="it in sizes" flex layout-align="center center" style="text-align: center;" layout="column">
            <div flex></div>
            <div class="preview-glyphs">
                <md-icon ng-style="{color: font.color}"
                         aria-label="{{ font.name }}"
                         class="material-icons step"
                         ng-class="it.size"
                         ng-bind="font.name">
                </md-icon>
            </div>
        </div>
    </div>
</div>

<div  flex="">
    <md-content layout-padding>
        <md-grid-list
                md-cols-gt-md="12" md-cols="3" md-cols-md="8"
                md-row-height-gt-md="1:1" md-row-height="4:3"
                md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
            <md-grid-tile
                    ng-repeat="tile in colorTiles | limitTo: 10"
                    ng-style="{
            'background': tile.color
          }"
                    md-colspan-gt-sm="{{tile.colspan}}"
                    md-rowspan-gt-sm="{{tile.rowspan}}">
            </md-grid-tile>
        </md-grid-list>
    </md-content>
</div>

<div layout="column" layout-padding ng-cloak flex-sm="100" flex-gt-sm="50" flex-offset-gt-sm="25">

    <br/>
    <md-content class="md-no-momentum">
        <md-input-container class="md-icon-float md-block">
            <!-- Use floating label instead of placeholder -->
            <label>Name</label>
            <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
            <input ng-model="user.name" type="text">
        </md-input-container>

        <md-input-container md-no-float class="md-block">
            <md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
            <input ng-model="user.phone" type="text" placeholder="Phone Number">
        </md-input-container>

        <md-input-container class="md-block">
            <!-- Use floating placeholder instead of label -->
            <md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
            <input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
        </md-input-container>

        <md-input-container md-no-float class="md-block">
            <input ng-model="user.address" type="text" placeholder="Address" >
            <md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
        </md-input-container>

        <md-input-container class="md-icon-float md-icon-right md-block">
            <label>Donation Amount</label>
            <md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
            <input ng-model="user.donation" type="number" step="0.01">
            <md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
        </md-input-container>

    </md-content>

</div>

<div layout="row">
    <div flex="20" style="background-color: red">
        [flex="20"]
    </div>
    <div flex="70" style="background-color: yellow">
        [flex="70"]
    </div>
    <div flex hide-sm hide-xs style="background-color: green">
        [flex]
    </div>
</div>


<div>Angular seed app: v<span app-version></span></div>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components\angular-animate\angular-animate.min.js"></script>
<script src="bower_components\angular-aria\angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
<script src="view.js"></script>
</body>
</html>
